json  = [{
    equip:'026320',
    name:'装甲步兵战车',
    equip_classify:'装甲车',
    state:'正常',
    price:'18000',
    modalities:'自购',
    car_classify:'装甲车辆A'
},{
    equip:'026230',
    name:'装甲步兵战车',
    equip_classify:'装甲车',
    state:'正常',
    price:'18000',
    modalities:'自购',
    car_classify:'装甲车辆A'
},{
    equip:'126320',
    name:'装甲步兵战车',
    equip_classify:'装甲车',
    state:'维修中',
    price:'18000',
    modalities:'自购',
    car_classify:'装甲车辆B'
},{
    equip:'226320',
    name:'重型坦克',
    equip_classify:'装甲车',
    state:'正常',
    price:'18000',
    modalities:'自购',
    car_classify:'装甲车辆A'
},{
    equip:'226320',
    name:'装甲步兵战车',
    equip_classify:'装甲车',
    state:'正常',
    price:'18000',
    modalities:'自购',
    car_classify:'装甲车辆A'
},{
    equip:'131320',
    name:'装甲步兵战车',
    equip_classify:'装甲车',
    state:'正常',
    price:'18000',
    modalities:'自购',
    car_classify:'装甲车辆A'
},{
    equip:'123120',
    name:'轻型坦克',
    equip_classify:'装甲车',
    state:'正常',
    price:'18000',
    modalities:'自购',
    car_classify:'装甲车辆A'
},
{
    equip:'121230',
    name:'装甲步兵战车',
    equip_classify:'装甲车',
    state:'正常',
    price:'18000',
    modalities:'自购',
    car_classify:'装甲车辆B'
},{
    equip:'763120',
    name:'水陆两栖战车',
    equip_classify:'装甲车',
    state:'正常',
    price:'18000',
    modalities:'自购',
    car_classify:'装甲车辆A'
},
{
    equip:'123031',
    name:'水陆两栖战车',
    equip_classify:'装甲车',
    state:'正常',
    price:'18000',
    modalities:'自购',
    car_classify:'装甲车辆B'
},]
var boor = false;
var  arr=[];
var dropDown = document.querySelectorAll('.glyphicon-chevron-up');
var oEqui = document.querySelector('#equi');
console.log(oEqui)
for(var i=0;i<dropDown.length;i++){
dropDown[i].onclick = function(){
    console.log(123);
    if(boor){
        var oUl=  this.parentNode.parentNode.nextElementSibling
        
        oUl.style.height = '0'
        boor =!boor;
    }else{
   var oUl=  this.parentNode.parentNode.nextElementSibling
   console.log(oUl);
   oUl.style.height = 'auto'
   boor =!boor;
     }
    }
}

//按钮下拉；
var dian = document.querySelectorAll('.nav ul li');
for(var i=0;i<dian.length;i++){
    dian[i].onclick = function(){
        console.log(123)
      console.log(this.lastElementChild.style.height)  ;
      if(this.lastElementChild.style.height=='0px'){
        this.lastElementChild.style.height ='auto';
      }else{
        this.lastElementChild.style.height ='0px';

      }
    }
}
console.log(arr );  
saXuan();
// 筛选装甲车辆类型A,B等
var arrNum=[];
function saXuan(){
    
    for (var i=0;i<json.length;i++){
      var lk=false
        if(arr[0]!=null){          
            for(var j=0;j<arr.length;j++){
               
                if(arr[j]==json[i].car_classify){
                    lk=true
                    break;
                }
            }
            if(!lk){
              
                arr.push(json[i].car_classify); 
            }             
        }else{
            arr.push(json[i].car_classify);          
        }   
    }
}

var carNumArray = num();
// 统计装甲车辆里面车辆的数量
function num(){
    var nuArr =[];
    for(var j=0;j<arr.length;j++){
        var lightTanks = 0;
    var heavyTanks =0;
    var armor=0;
    var amphibious = 0;
    var zong =0;
    for(var i=0;i<json.length;i++){
        
            if(arr[j]==json[i].car_classify){
                zong++;
                switch(json[i].name){
                    case '轻型坦克':
                        lightTanks++;
                        break;
                        case '重型坦克':
                                heavyTanks++;
                                break;
                                case '装甲步兵战车':
                                        armor++;
                                        break;
                                        case '水陆两栖战车':
                                                amphibious++;
                                                break;
                }
            }
        }
       console.log(Math.floor(lightTanks/10) )
        if(Math.floor(lightTanks/10)==0){
            lightTanks ='0'+lightTanks;
        };
        if(Math.floor(heavyTanks/10)==0){
            heavyTanks ='0'+heavyTanks;
        }
        if(Math.floor(armor/10)==0){
            armor ='0'+armor;
        }
        if(Math.floor(amphibious/10)==0){
            amphibious ='0'+amphibious;
        }
     var ln=  {
            lightTanks: lightTanks,
            heavyTanks: heavyTanks,
            armor :armor,
            amphibious :amphibious,
            zong :zong
        }
       nuArr.push(ln);
    }
    return nuArr;
}

//渲染界面
for(var i=0;i<arr.length;i++){
    rendering();
}

function rendering(){
    var oLi = document.createElement('li');
    oLi.innerHTML =` <li>
    <div class="box"><div>${arr[i]}</div><div>${carNumArray[i].zong}</div><div><span class="glyphicon glyphicon-chevron-up"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span> </div></div>
    <ul class="box-center">
        <li class="box-rong">
    <div>轻型坦克</div><div>${carNumArray[i].lightTanks}</div><div><span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span> </div>
        </li>
        <li class="box-rong">
    <div>重型坦克</div><div>${carNumArray[i].heavyTanks}</div><div><span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span> </div>
        </li>
        <li class="box-rong">
    <div>装甲步兵战车</div><div>${carNumArray[i].armor}</div><div><span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span> </div>
        </li>
        <li class="box-rong">
    <div>水陆两栖战车</div><div>${carNumArray[i].amphibious}</div><div><span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span> </div>
        </li>
    </ul>
</li>` 
console.log(oEqui)
oEqui.appendChild(oLi);
}
// 点击事件，点击显示
oEqui.onclick = function(){
    console.log(event.target.parentNode.parentNode.className);
    if(event.target.parentNode.parentNode.className =='box'){
       
        if(boor){
            var oUl=  event.target.parentNode.parentNode.nextElementSibling
            
            oUl.style.height = '0'
            boor =!boor;
        }else{
       var oUl=  event.target.parentNode.parentNode.nextElementSibling
       console.log(oUl);
       oUl.style.height = 'auto'
       boor =!boor;
         }
    }
}


